<template>
  <div style="height: 100%">
    <g-layout>
      <template #leftSider>
        <div class="tree-sider-container">
          <!-- 组织架构树 -->
          <organization-unit-tree-panel
            ref="treeRef"
            @selectedNode="selectedNodeFunc"
          ></organization-unit-tree-panel>
        </div>
      </template>
      <template #content>
        <a-tabs class="content-container" v-model:activeKey="currentTab">
          <a-tab-pane :tab="l('Users')" key="1" :forceRender="false"></a-tab-pane>
          <a-tab-pane :tab="l('Roles')" key="2" :forceRender="true"> </a-tab-pane>
        </a-tabs>
        <organization-unit-members-panel
          v-if="!!selectedTree && currentTab == '1'"
          :selectTree="selectedTree"
        ></organization-unit-members-panel>
        <organization-unit-role-panel
          :selectTree="selectedTree"
          v-if="!!selectedTree && currentTab == '2'"
        ></organization-unit-role-panel>
        <a-empty
          v-if="!selectedTree"
          class="in-middle"
          :description="l('SelectAnOrganizationUnitToSeeMembers')"
        ></a-empty>
      </template>
    </g-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import OrganizationUnitsMixin from './organization-units';
  export default defineComponent({
    name: 'organization-units-news',
    mixins: [OrganizationUnitsMixin],
  });
</script>

<style lang="less" scoped>
  :deep(.g-layout-content) {
    .dynamic-table {
      height: calc(100% - 60px);
    }
  }
  .tree-sider-container {
    width: 100%;
    min-width: 300px;
    padding: 16px;
  }
  .content-container {
    padding: 0 16px;
  }
  :deep(.ant-tabs-nav) {
    margin: 0;
  }

  .in-middle {
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
</style>
